<template>
  <div class="bigDataChart_min">
    <div class="details">
      <dv-border-box-8 style="width: 100%; height: 100%">
        <div class="title">
          <dv-border-box-1 style="position: relative">
            <span>智慧停车场管理平台</span>
          </dv-border-box-1>
          <dv-decoration-5 style="margin: 0 auto; width: 80%; height: 40px" />
        </div>
        <div class="btn" @click="toBigData">
          <dv-decoration-11 class="start">进入大屏监控</dv-decoration-11>
        </div>
        <dv-decoration-8 :reverse="true" class="decoration1" />
        <dv-decoration-8 class="decoration2" />
        <dv-decoration-8 class="decoration3" />
        <dv-decoration-8 :reverse="true" class="decoration4" />
      </dv-border-box-8>
    </div>
  </div>
</template>

<script>
export default {
  name: "BigDataChart_min",
  methods: {
    toBigData() {
      this.$router.push("/bigData");
    },
  },
};
</script>

<style scopde>
* {
  box-sizing: border-box;
  padding: 0;
}
.bigDataChart_min {
  width: 100%;
  height: 80%;
  padding: 20px;
}
.left {
  display: flex;
  float: left;
  width: 25%;
  height: 100%;
  padding: 20px 0 20px 0;
  flex-direction: column;
  justify-content: space-between;
}
.leftItem {
  width: 100%;
  height: 30%;
}
.right {
  display: flex;
  float: right;
  width: 25%;
  height: 100%;
  padding: 20px 0 20px 0;
  flex-direction: column;
  justify-content: space-between;
}
.rightItem {
  width: 100%;
  height: 30%;
}
.center {
  display: flex;
  float: left;
  width: 50%;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
}
.center .title {
  width: 100%;
  height: 10%;
}
.weather {
  width: 100%;
  height: 12%;
}
.chinaMap {
  width: 100%;
  height: 75%;
}
.details {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("../assets/image/index_bg.png");
  background-size: 100% 100%;
}
.details .title {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 80%;
  height: 120px;
}
.details span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85%;
  transform: translate(-50%, -50%);
  background-image: -webkit-linear-gradient(bottom, #ffffff, #4ecfbd);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2.8rem;
  letter-spacing: 0.8em;
}

.details .btn {
  position: absolute;
  top: 55%;
  left: 0;
  width: 100%;
  height: 120px;
}
.details .start {
  margin: 50px auto;
  width: 50%;
  height: 13vh;
  font-size: 1.8rem;
  color: #4ecfbd;
  letter-spacing: 1rem;
}
.details .start:hover {
  cursor: pointer;
  color: #4b7bec;
}
.decoration1 {
  position: absolute;
  top: 1%;
  left: 0;
  width: 250px;
  height: 30px;
  transform: rotate(180deg);
}
.decoration2 {
  position: absolute;
  top: 1%;
  right: 0;
  width: 250px;
  height: 30px;
  transform: rotate(180deg);
}
.decoration3 {
  position: absolute;
  bottom: 1%;
  left: 0;
  width: 250px;
  height: 30px;
}
.decoration4 {
  position: absolute;
  bottom: 1%;
  right: 0;
  width: 250px;
  height: 30px;
}
</style>